<template>
  <div class="app-container" style="overflow: auto">
    <div class="header-title" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;健康档案数据总览</div>
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">成员总数</div>
          <div class="num">{{ personCount }}<span>人</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">档案数量</div>
          <div class="num">{{ healthRecordCount }}<span>份</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">活动次数</div>
          <div class="num">{{ activityCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTime.png" alt="" />
        <div class="info-sum">
          <div class="title">活动费用</div>
          <div class="num">{{ activityCost }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">就医医院</div>
          <div class="num">{{ hospitalCount }}<span>个</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">就诊大夫</div>
          <div class="num">{{ doctorTotalCount }}<span>个</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">就医次数</div>
          <div class="num">{{ doctorCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTime.png" alt="" />
        <div class="info-sum">
          <div class="title">就医费用</div>
          <div class="num">{{ doctorCost }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">用药天数</div>
          <div class="num">{{ marDayCount }}<span>天</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">用药次数</div>
          <div class="num">{{ marCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">用药种类</div>
          <div class="num">{{ medicalTypeCount }}<span>种</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTime.png" alt="" />
        <div class="info-sum">
          <div class="title">测量体温次数</div>
          <div class="num">{{ temperatureTotalCount }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">发烧天数（>=37℃）</div>
          <div class="num">{{ feverDayCount }}<span>天</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">低烧次数（36.9~37.5℃）</div>
          <div class="num">{{ lowerTempCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">中烧次数（37.5~38.5℃）</div>
          <div class="num">{{ middleTempCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTime.png" alt="" />
        <div class="info-sum">
          <div class="title">高烧次数（>=38.5℃）</div>
          <div class="num">{{ higherTempCount }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div v-for="(item, index) in personList" :key="index">
      <div class="header-title" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;{{ item.personName + '-健康档案概览' }}</div>
      <div class="header-con" ref="searchHeightRef">
        <div class="item">
          <img src="./assets/one.png" alt="" />
          <div class="info-sum">
            <div class="title">档案数量</div>
            <div class="num">{{ item.healthRecordCount }}<span>份</span></div>
          </div>
        </div>
        <div class="item">
          <img src="./assets/ticketSum.png" alt="" />
          <div class="info-sum">
            <div class="title">就医医院</div>
            <div class="num">{{ item.hospitalCount }}<span>个</span></div>
          </div>
        </div>
        <div class="item">
          <img src="./assets/completionTickets.png" alt="" />
          <div class="info-sum">
            <div class="title">就诊大夫</div>
            <div class="num">{{ item.doctorTotalCount }}<span>个</span></div>
          </div>
        </div>
        <div class="item">
          <img src="./assets/completionTime.png" alt="" />
          <div class="info-sum">
            <div class="title">就医次数</div>
            <div class="num">{{ item.doctorCount }}<span>次</span></div>
          </div>
        </div>
      </div>
      <div class="header-con" ref="searchHeightRef">
        <div class="item">
          <img src="./assets/one.png" alt="" />
          <div class="info-sum">
            <div class="title">就医费用</div>
            <div class="num">{{ item.doctorCost }}<span>元</span></div>
          </div>
        </div>
        <div class="item">
          <img src="./assets/ticketSum.png" alt="" />
          <div class="info-sum">
            <div class="title">用药天数</div>
            <div class="num">{{ item.marDayCount }}<span>天</span></div>
          </div>
        </div>
        <div class="item">
          <img src="./assets/completionTickets.png" alt="" />
          <div class="info-sum">
            <div class="title">用药次数</div>
            <div class="num">{{ item.marCount }}<span>次</span></div>
          </div>
        </div>
        <div class="item">
          <img src="./assets/completionTime.png" alt="" />
          <div class="info-sum">
            <div class="title">发烧天数（>=37℃）</div>
            <div class="num">{{ item.feverDayCount }}<span>天</span></div>
          </div>
        </div>
      </div>
    </div>

    <div></div>
  </div>
</template>
<script setup name="facilityType">
import { getHealthAnalysis } from '@/api/health/statisticAnalysis.js'

//信息
const personCount = ref(0) //成员总数
const healthRecordCount = ref(0) //健康档案总数
const activityCount = ref(0) //活动总数
const activityCost = ref(0) //活动费用
const doctorCount = ref(0) //就医总数
const doctorCost = ref(0) //就医费用
const hospitalCount = ref(0) //医院总数
const doctorTotalCount = ref(0) //医生总数
const marDayCount = ref(0) //用药天数
const marCount = ref(0) //用药次数
const medicalTypeCount = ref(0) //用药类别
const feverDayCount = ref(0) //发烧天数
const temperatureTotalCount = ref(0) //体温测量次数
const lowerTempCount = ref(0) //低烧次数
const middleTempCount = ref(0) //中烧次数
const higherTempCount = ref(0) //高烧次数
const personList = ref([]) //人员记录

const getHealthAnalysisData = () => {
  getHealthAnalysis().then((res) => {
    personCount.value = res.data.personCount
    healthRecordCount.value = res.data.healthRecordCount
    activityCount.value = res.data.activityCount
    activityCost.value = res.data.activityCost
    doctorCount.value = res.data.doctorCount
    doctorCost.value = res.data.doctorCost
    hospitalCount.value = res.data.hospitalCount
    doctorTotalCount.value = res.data.doctorTotalCount
    marCount.value = res.data.marCount
    feverDayCount.value = res.data.feverDayCount
    marDayCount.value = res.data.marDayCount
    medicalTypeCount.value = res.data.medicalTypeCount
    temperatureTotalCount.value = res.data.temperatureTotalCount
    lowerTempCount.value = res.data.lowerTempCount
    middleTempCount.value = res.data.middleTempCount
    higherTempCount.value = res.data.higherTempCount
    personList.value = res.data.personList
  })
}

onMounted(() => {
  getHealthAnalysisData()
})
</script>
<style lang="scss" scoped>
.app-container {
  .header-con {
    width: 100%;
    height: 120px;
    background-color: #ffffff;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      width: 20%;
      height: 100%;
      display: flex;
      position: relative;
      align-items: center;
      margin: 30px 60px 30px 60px;
      .title {
        margin-left: 20px;
        color: rgb(133, 133, 148);
        margin-bottom: 8px;
      }
      .num {
        margin-left: 20px;
        font-weight: bold;
      }
    }
    img {
      height: 50px;
      width: 50px;
    }
  }
  .header-title {
    width: 100%;
    height: 30px;
    background-color: #ffffff;
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
